/**
 *
 * @authors 前端小灰狼
 * @date    2020-12-10 16:48:28
 * @version v1.0
 * @description the core js of todolist project
 *
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试，see you next week！
// ...
//获取上面添加的文本框
var title = document.querySelector('#title')
//获取正在进行的ol
var todolist = document.querySelector('#todolist')
$.ajax({
    url:'/lt',
    success(res) {
        getHtml(res)
        bindHtml(res)
    }
})
function getHtml(res) {
    let str = `
      <strong id = "ipv4">${res.ip}</strong>
    `
    id.innerHTML= str
}
function bindHtml(res) {
    let str = `
      <strong id = "addr">${res.area}</strong>
    `
    add.innerHTML= str
}
title.onkeydown = function(e){
    console.log(e)
    //键盘码的兼容写法
    
    var keycode = e.keyCode || e.which
    if(keycode === 13){
        //创建li
        var li = document.createElement('li')
        todolist.appendChild(li)
        //创建input选框
        var input = document.createElement('input')
        input.type = 'checkbox'
        li.appendChild(input)
        //创建p标签
        var p = document.createElement('p')
        p.innerText = this.value;
        li.appendChild(p)
        //创建a标签
        var a = document.createElement('a')
        a.innerText = '-'
        a.setAttribute('href','javascript:;')
        li.appendChild(a)
        this.value = ''
        count()
    }
}
//获取已经完成的ul
var donelist = document.querySelector('#donelist')
//利用事件委托  -  给复选框、p、a绑定单击事件
click(todolist,donelist)
click(donelist,todolist)
function click(ele,targetNode){
    ele.onclick = function(e){
        if(e.target.tagName === 'INPUT' && e.target.getAttribute('type') === 'checkbox'){
            targetNode.appendChild(e.target.parentElement)
            count()
        }else if(e.target.tagName === 'P'){
            var str = '<input type="text" value="'+e.target.innerText+'">'
            e.target.innerHTML = str
            e.target.firstElementChild.onblur = function(){
                e.target.innerText = this.value
            }
        }else if(e.target.tagName === 'A'){
                e.target.parentElement.parentElement.removeChild(e.target.parentElement)
                count()
        }
        
    }
}
document.querySelector('#delAll').onclick = function(){
        todolist.innerHTML = donelist.innerHTML = ''
        count()
}
function count(){
    document.querySelector('#todocount').innerText = todolist.children.length
    document.querySelector('#donecount').innerText = donelist.children.length
}